<template>
  <div>
    <div>
      <el-button @click="changeMonth(-1)" :loading="dataListLoading">上个月</el-button>
      <el-date-picker style="width: 150px;" v-model="month" type="month" :editable="false" placeholder="选择月" value-format="yyyy-MM" @change="changeMonth()"></el-date-picker>
      <el-button @click="changeMonth(1)" :loading="dataListLoading">下个月</el-button>
      <el-tooltip placement="bottom" effect="light">
        <div slot="content">
          <p>绩效工资*绩效系数=实际发放绩效工资</p>
          <p><span class="tip">绩效等级</span><span class="tip">绩效分数</span><span class="tip">绩效系数</span></p>
          <p v-for="item in kpiRatioArr" :key="item.id"><span class="tip">{{item.name}}</span><span class="tip">{{item.scoresBegin}}分-{{item.scoresEnd}}分</span><span class="tip">{{item.ratio}}</span></p>
        </div>
        <div style="cursor:pointer;display:inline-block;margin-left:10px;">绩效等级说明<i class="el-icon-question"></i></div>
      </el-tooltip>
    </div>
    <div style="margin-top:20px;">
      <el-table :height="tableHeight" :span-method="objectSpanMethod" :data="tableData" border style="width: 100%" :summary-method="getSummaries" show-summary>
        <el-table-column label="序号" prop="kpiItemPid" width="100" align="center"></el-table-column>
        <el-table-column label="考核类型" prop="kpiItemType" min-width="110" align="center"></el-table-column>
        <el-table-column label="考核内容" prop="kpiItemName" min-width="180" align="left" header-align="center"></el-table-column>
        <el-table-column label="考核关键点" prop="kpiItemKey" min-width="180" align="left" header-align="center">
          <template slot-scope="scope">
            <div style="white-space: pre-line;">{{scope.row.kpiItemKey}}</div>
          </template>
        </el-table-column>
        <el-table-column label="考核参考指标" prop="kpiItemIndex" min-width="180" align="left" header-align="center">
          <template slot-scope="scope">
            <div style="white-space: pre-line;">{{scope.row.kpiItemIndex}}</div>
          </template>
        </el-table-column>
        <el-table-column label="分值倍数" prop="scoresPower" width="120" align="center"></el-table-column>
        <el-table-column v-if="paperUserInfo.status === 3" label="绩效分值" prop="scores" width="120" align="center"></el-table-column>
      </el-table>
    </div>
    <p v-if="paperUserInfo.status === 3" class="notice">注：如被考核人员对考核结果存在质疑，可直接向人事部门申诉。</p>
  </div>
</template>

<script>

import {dateUtil} from '@/utils/dateUtil'

  export default {
    data () {
      return {
        month: '',
        dataListLoading: false,
        tableData: [],
        OrderIndexArr: [],
        OrderIndexLenth: [],
        kpiItemPidArr: ['1','2','3','4'],
        paperUserInfo: {},
        kpiRatioArr:[],
        tableHeight: window.tableHeight
      }
    },
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 260
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 260
      }
    },
    mounted(){
      let defalutDate = this.$route.query.kpiDate;
      this.month = defalutDate ? defalutDate: dateUtil.thisMonth();
      this.getMyKpi();
      this.getKpiRatio();
    },
    methods: {
      objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        let index = this.OrderIndexArr.indexOf(rowIndex);
        if (columnIndex === 0 || columnIndex === 1) {
          return {
              rowspan: index < 0? 0: this.OrderIndexLenth[index],
              colspan: index < 0? 0: 1
          }
        }
      },
      getKpiRatio() {
        this.$http({
          url: this.$http.adornUrl('/kpi/kpiconfig/list'),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.kpiRatioArr = data.data;
          }else {
            this.$message.error(data.msg)
          }
        })
      },
      changeMonth(preOrNext) {
        let monthStr = this.month.split('-').map((item) => parseInt(item))
        if(preOrNext === 1) {
          this.month = monthStr[1] === 12? `${monthStr[0] + 1}-01` : `${monthStr[0]}-${('0'+ (monthStr[1] + 1)).substr(-2)}` 
        }else if(preOrNext === -1) {
          this.month = monthStr[1] === 1? `${monthStr[0] - 1}-12` : `${monthStr[0]}-${('0'+ (monthStr[1] - 1)).substr(-2)}` 
        }
        this.getMyKpi();
      },
      computedColLine() {
        this.OrderIndexLenth = [];
        this.OrderIndexArr = [0];
        this.kpiItemPidArr.forEach((item) => {
          let count = 0;
          this.tableData.forEach((data) => {
            if(data.kpiItemPid === item) count++
          })
          if(count !== 0) {
            this.OrderIndexLenth.push(count)
            this.OrderIndexArr.push(this.OrderIndexArr[this.OrderIndexArr.length -1] + count)
          }
        })
      },
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            return sums[index] = '绩效等级';
          }else if(index === 1) {
            return sums[index] = this.paperUserInfo.kpiLevel;
          }else if(index === 2) {
            return sums[index] = '绩效系数';
          }else if(index === 3){
            return sums[index] = this.paperUserInfo.kpiRatio;
          }else if(index === 5){
            return sums[index] = '总分';
          }else if(index === 6) {
            return sums[index] = this.paperUserInfo.kpiScores;
          }else {
            sums[index] = '';
          }
        });

        return sums;
      },
      getMyKpi() {
        this.$http({
          url: this.$http.adornUrl('/kpi/paper/getMyKpiPaper'),
          method: 'post',
          params: this.$http.adornParams({
            'kpiDate': this.month,
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.tableData = data.data.items;
            this.paperUserInfo = data.data.paper;
            this.computedColLine();
          }else {
            this.$message.error(data.msg)
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .tip{
    display: inline-block;
    width:70px;
    text-align: center;
  }
  .notice{
    margin-top:10px;
    color:darkgray;
  }
  .assessed-info{
    display:inline-block;
    color:#606266;
    margin-left:30px;
    p{
      display:inline-block;
      margin-right:25px;
      font-weight: bold;
      span{
        display: inline-block;
        font-weight: normal;
        width: 130px;
        text-align: center;
        border-bottom: 1px solid #606266;
      }
    }
  }
</style>